.two{
  background: #ca5218;
  color:#fff;
}
.three{
  color:#fff;
  background:#cba924;
}
.main{
  .main-body{
    .ranking{
      h1{
        font-size: 22px;
        padding: 24px 0 12px 0;

        span{
          font-size: 14px;
          color: #7d7d7d;
          font-weight: 100;
        }
      }
      .ranking-sort{
        background: #e9eaeb;
        margin-bottom:16px;
        ul{
          li{
            float: left;
            padding: 6px 14px;
            color: #8c8c8c;
            font-size: 14px;
            transition: all 0.3s;
            position: relative;
            cursor:pointer;
            & a:hover{
              color:#ca0813;
            }
            &::after{
              content:'';
              width: 2px;
              height: 2px;
              position: absolute;
              right: 0px;
              top:50%;
              //border-radius:50%;
              //font-size: 16px;
              display: block;
              background: #8c8c8c;
              line-height: 22px;
            }
            &:last-child::after{
              content:'';
              width: 0px;
              height: 0px;
              position: absolute;
              right: 0px;
              top:50%;
              //border-radius:50%;
              //font-size: 16px;
              display: block;
              background: #8c8c8c;
              line-height: 22px;


            }
          }

          .active{
            color:#ca0813;
          }
        }
      }
      .ranking-list{
        &:nth-child(1){
          margin-right: 20px;
        }
        &:nth-child(2){
          margin-right: 20px;
        }
        &:nth-child(4){
          margin-right: 20px;
        }
        &:nth-child(5){
          margin-right: 20px;
        }
        width: 280px;
        float: left;
        margin-bottom: 26px;
        h2{
          padding-bottom: 12px;
          span{
            float: right;
            font-size: 14px;
            color: #7d7d7d;
            line-height: 14px;
            font-weight: 100;
            a{
              transition:all 0.3s;
              &:hover{
                color:#ca0813;
              }
            }
          }
        }
        .item{
          padding: 12px 0;
          border-top: 2px solid #7d7d7d;
          .item-left{
            width: 100px;
            float: left;
            .box{
              background: #ca0813;
              color: #fff;
              padding: 2px;
              font-size: 14px;
              display: block;
              width: 34px;

            }
            .caption{
              margin-top: 8px;
              height:32px;
              font-size: 14px;
              color: #777;
              font-weight: 100;
              line-height: 16px;
              overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
            }
            .name{
              margin-top: 6px;
              font-size: 12px;
              color: #8c8c8c;
              font-weight: 100;
              height:24px;
            }
            .title{
              margin-top: 6px;
              font-size: 12px;
              color: #7ca5db;
              font-weight: 100;
            }
            .data{
              font-size: 12px;
              color: #8c8c8c;
              display:block;
            }

          }
          .item-right{
            float: right;
            width: 160px;
            height: 130px;
          }
        }
        ul{

          li{

            height: 44px;
            line-height: 44px;
            border-top:2px solid #e9eaeb;

            .box2{
              width: 18px;
              height: 18px;
              text-align: center;
              line-height: 18px;
              margin-top: 13px;
              margin-right:12px;
              float: left;
              font-size: 12px;
              background: #e9eaeb;

            }
            .title{
              font-size: 12px;
              color: #5d5d5d;
              float: left;
              width: 160px;
              display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
            }
            .data{
              font-size: 12px;
              color: #8c8c8c;
              float: right;
            }
            &:nth-child(2) .box2{
              background:#ca5218;
              color:#fff;
            }
            &:nth-child(3) .box2{
              background:#c8a403;
              color:#fff;
            }
          }

        }
      }
    }
  }
}